<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { userStore } from '@/store/user'
const store = userStore()
const route = useRoute()
const router = useRouter()
const gotoPage = (path:any) => {
    router.push(path)
}
</script>
<template>
    <dl>
        <dt v-if="store.role == '1'" class="icon-task-bar" :class="route.path == '/task' ? 'active' : ''"
            @click="gotoPage('/task')">
            <i></i>
            <p>任务</p>
        </dt>
        <dt v-if="store.role == '2'" class="icon-task-bar" :class="route.path == '/admin/home' ? 'active' : ''"
            @click="gotoPage('/admin/home')">
            <i></i>
            <p>首页</p>
        </dt>
        <dt v-if="store.role == '3'" class="icon-talent-bar" :class="route.path == '/talent' ? 'active' : ''"
            @click="gotoPage('/talent')">
            <i></i>
            <p>IT人才</p>
        </dt>
        <dt v-if="store.role != '2'" class="icon-contract-bar" :class="route.path == '/contract' ? 'active' : ''"
            @click="gotoPage('/contract')">
            <i></i>
            <p>合约</p>
        </dt>
        <dt v-if="store.role != '2'" class="icon-message-bar" :class="route.path == '/message' ? 'active' : ''"
            @click="gotoPage('/message')">
            <i></i>
            <p>消息</p>
        </dt>
        <dt class="icon-my-bar" :class="route.path == '/my' ? 'active' : ''" @click="gotoPage('/my')">
            <i></i>
            <p>我的</p>
        </dt>
    </dl>
</template>
<style scoped>
dl {
    display: flex;
    width: 100%;
    height: 3rem;
    position: fixed;
    bottom: 0px;
    left: 0px;
    border-top: 1px solid #dddddd;
    background: #ffffff;
}

dl dt {
    flex: 1;
    padding: 0.69rem 0;
    justify-content: center;
    text-align: center;
    font-size: 0.59rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
}

dl dt i {
    width: 0.91rem;
    height: 0.91rem;
    display: block;
    margin: 0 auto;
}

.icon-task-bar i {
    background: url('@/assets/img/icon/bar-task-link.png') no-repeat;
    background-size: 100%;
}

.icon-task-bar.active i {
    background: url('@/assets/img/icon/bar-task-active.png') no-repeat;
    background-size: 100%;
}

.icon-talent-bar i {
    background: url('@/assets/img/icon/bar-talent-link.png') no-repeat;
    background-size: 100%;
}

.icon-talent-bar.active i {
    background: url('@/assets/img/icon/bar-talent-active.png') no-repeat;
    background-size: 100%;
}

.icon-contract-bar i {
    background: url('@/assets/img/icon/bar-contract-link.png') no-repeat;
    background-size: 100%;
}

.icon-contract-bar.active i {
    background: url('@/assets/img/icon/bar-contract-active.png') no-repeat;
    background-size: 100%;
}

.icon-message-bar i {
    background: url('@/assets/img/icon/bar-message-link.png') no-repeat;
    background-size: 100%;
}

.icon-message-bar.active i {
    background: url('@/assets/img/icon/bar-message-active.png') no-repeat;
    background-size: 100%;
}

.icon-my-bar i {
    background: url('@/assets/img/icon/bar-my-link.png') no-repeat;
    background-size: 100%;
}

.icon-my-bar.active i {
    background: url('@/assets/img/icon/bar-my-active.png') no-repeat;
    background-size: 100%;
}

dl dt.active p {
    color: #ff9415;
}
</style>